import {
  defineComponent,
  defineAsyncComponent,
  computed,
  watch,
  ref,
  openBlock,
  createElementBlock,
  normalizeClass,
  createElementVNode,
  Fragment,
  renderList,
  normalizeStyle,
  toDisplayString,
  createVNode,
  unref,
  createBlock,
  withCtx,
  createCommentVNode
} from "vue";
import {
  G as Group,
  u as useCanvasState,
  b as useProp,
  i as uuid,
  t as toPercent,
  g as getComponentStyle,
  S as Shape,
  a as getInnerComponentShapeStyle,
  f as filterStyle,
  D as DataMode,
  _ as _export_sfc
} from "./index-CEDaTd93.js";
const _hoisted_1 = ["onClick"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "Tabs",
  props: {
    component: {}
  },
  setup(__props) {
    const GroupComponent = Group.config;
    const GroupView = defineAsyncComponent(Group.component);
    const props = __props;
    const canvasState = useCanvasState();
    const editMode = computed(() => canvasState.isEditMode);
    const { propValue } = useProp(props.component);
    const labels = computed(() => {
      return propValue.label.items || [];
    });
    watch(
      () => propValue.label.mode,
      () => {
        const len = (propValue.label.items || []).length;
        const mode = propValue.label.mode || "horizontal";
        const labelHeight = propValue.style.height;
        const { top, left, width, height } = props.component.style;
        for (let i = 0; i < len; i++) {
          if (!props.component.subComponents[i]) {
            const groupConfig = new GroupComponent(uuid());
            if (mode === "horizontal") {
              groupConfig.changeStyle(["position"], {
                top: top + labelHeight,
                left,
                width,
                height: height - labelHeight
              });
            } else {
              groupConfig.changeStyle(["position"], {
                top,
                left: left + labelHeight,
                width: width - labelHeight,
                height
              });
            }
            groupConfig.parent = props.component;
            groupConfig.groupStyle = {
              gleft: 0,
              gtop: toPercent((groupConfig.positionStyle.top - top) / height),
              gwidth: 100,
              gheight: toPercent(groupConfig.positionStyle.height / height),
              grotate: props.component.positionStyle.rotate || 0
            };
            props.component.updateChild(i, groupConfig);
          } else {
            const groupConfig = props.component.subComponents[i];
            if (mode === "horizontal") {
              groupConfig.changeStyle(["position", "top"], top + labelHeight);
              groupConfig.changeStyle(["position", "left"], left);
            } else {
              groupConfig.changeStyle(["position", "top"], top);
              groupConfig.changeStyle(["position", "left"], left + labelHeight);
            }
            groupConfig.groupStyle = {
              gleft: toPercent((groupConfig.positionStyle.left - left) / width),
              gtop: toPercent((groupConfig.positionStyle.top - top) / height),
              gwidth: toPercent(groupConfig.positionStyle.width / width),
              gheight: toPercent(groupConfig.positionStyle.height / height),
              grotate: groupConfig.groupStyle.grotate || 0
            };
          }
        }
      },
      {
        immediate: true
      }
    );
    const getShapeStyle = item => {
      var _a;
      if ((_a = item.groupStyle) == null ? void 0 : _a.gheight) {
        return filterStyle(item.groupStyle, [
          "gtop",
          "gleft",
          "gwidth",
          "gheight",
          "grotate"
        ]);
      } else {
        return filterStyle(item.style, [
          "top",
          "left",
          "width",
          "height",
          "rotate"
        ]);
      }
    };
    const curComponent = computed(() => canvasState.curComponent);
    const activeKey = ref(0);
    const isShow = display => {
      return !(canvasState.isEditMode && !display);
    };
    const tabsClick = index => {
      activeKey.value = index;
    };
    const getShow = index => {
      return activeKey.value === index;
    };
    const modeStyle = computed(() => {
      return propValue.label.mode ? propValue.label.mode : "horizontal";
    });
    const contentRef = ref(null);
    const content = computed(() => {
      return props.component.subComponents[activeKey.value];
    });
    const labelStyle = computed(() => {
      return {
        [propValue.label.mode === "horizontal"
          ? "height"
          : "width"]: `${propValue.style.height}px`,
        color: propValue.style.color,
        fontSize: `${propValue.style.fontSize}px`,
        weight: `${propValue.style.fontWeight}px`,
        family: `${propValue.style.fontWeight}px`
      };
    });
    const handleDragOver = e => {
      e.preventDefault();
      e.dataTransfer.dropEffect = "copy";
    };
    const handleDrop = async e => {
      e.preventDefault();
      e.stopPropagation();
      const componentName = e.dataTransfer.getData("componentName");
      if (componentName) {
        const component = new canvasState.components[componentName]();
        if (component.dataMode === DataMode.UNIVERSAL) {
          component.loadDemoData();
        }
        const { top, left } = document
          .querySelector("#editor")
          .getBoundingClientRect();
        const y = (e.pageY - top) / canvasState.scale;
        const x = (e.pageX - left) / canvasState.scale;
        const parentStyle =
          props.component.subComponents[activeKey.value].style;
        component.changeStyle(["position", "top"], y);
        component.changeStyle(["position", "left"], x);
        component.groupStyle = {
          gleft: toPercent(
            (component.positionStyle.left - parentStyle.left) /
              parentStyle.width
          ),
          gtop: toPercent(
            (component.positionStyle.top - parentStyle.top) / parentStyle.height
          ),
          gwidth: toPercent(component.positionStyle.width / parentStyle.width),
          gheight: toPercent(
            component.positionStyle.height / parentStyle.height
          ),
          grotate: component.positionStyle.rotate || 0
        };
        component.parent = props.component;
        props.component.subComponents[activeKey.value].appendChild(component);
      }
    };
    return (_ctx, _cache) => {
      return (
        openBlock(),
        createElementBlock(
          "div",
          {
            class: normalizeClass(["dv-tabs", modeStyle.value])
          },
          [
            createElementVNode(
              "div",
              {
                class: normalizeClass(["tabs-nav", modeStyle.value])
              },
              [
                (openBlock(true),
                createElementBlock(
                  Fragment,
                  null,
                  renderList(labels.value, (item, index) => {
                    return (
                      openBlock(),
                      createElementBlock(
                        "div",
                        {
                          key: index,
                          class: normalizeClass([
                            "tabs-tab",
                            { active: getShow(index), [modeStyle.value]: true }
                          ]),
                          style: normalizeStyle(labelStyle.value),
                          onClick: $event => tabsClick(index)
                        },
                        toDisplayString(item),
                        15,
                        _hoisted_1
                      )
                    );
                  }),
                  128
                ))
              ],
              2
            ),
            !editMode.value
              ? (openBlock(),
                createElementBlock(
                  "div",
                  {
                    key: 0,
                    ref_key: "content",
                    ref: content,
                    class: "tabs-content"
                  },
                  [
                    createVNode(
                      unref(GroupView),
                      {
                        id: "component" + content.value.id,
                        class: "component",
                        style: normalizeStyle(
                          unref(getComponentStyle)(content.value)
                        ),
                        component: content.value
                      },
                      null,
                      8,
                      ["id", "style", "component"]
                    )
                  ],
                  512
                ))
              : (openBlock(),
                createElementBlock(
                  "div",
                  {
                    key: 1,
                    ref_key: "contentRef",
                    ref: contentRef,
                    class: "tabs-content",
                    onDrop: handleDrop,
                    onDragover: handleDragOver
                  },
                  [
                    isShow(content.value.display || false)
                      ? (openBlock(),
                        createBlock(
                          unref(Shape),
                          {
                            key: 0,
                            id: "shape" + content.value.id,
                            defaultStyle: content.value.style,
                            style: normalizeStyle(getShapeStyle(content.value)),
                            active:
                              content.value.id ===
                              (curComponent.value || {}).id,
                            info: content.value,
                            class: normalizeClass({
                              lock: content.value.locked
                            }),
                            isInner: true,
                            index: activeKey.value
                          },
                          {
                            default: withCtx(() => [
                              createVNode(
                                unref(GroupView),
                                {
                                  id: "component" + content.value.id,
                                  class: "component",
                                  style: normalizeStyle(
                                    unref(getInnerComponentShapeStyle)(
                                      content.value
                                    )
                                  ),
                                  component: content.value
                                },
                                null,
                                8,
                                ["id", "style", "component"]
                              )
                            ]),
                            _: 1
                          },
                          8,
                          [
                            "id",
                            "defaultStyle",
                            "style",
                            "active",
                            "info",
                            "class",
                            "index"
                          ]
                        ))
                      : createCommentVNode("", true)
                  ],
                  544
                ))
          ],
          2
        )
      );
    };
  }
});
const Tabs = /* @__PURE__ */ _export_sfc(_sfc_main, [
  ["__scopeId", "data-v-f53e4cbe"]
]);
export { Tabs as default };
